import React,{memo, useEffect, useMemo} from 'react'
import {connect} from 'react-redux'
import {useLocation} from 'react-router-dom'
import * as action from './store/actionCreator'
import HeaderComponent from '../../common/headerComponent/HeaderComponent'

function Detail(props) {
    const { getDetailData } = props;
    //为动态路由，而且为路由组件，从url上取params值
    let {pathname} = useLocation()
    console.log(pathname,'////');
    //这个方法是从  url 取得相应的值 ，param值 然后向后端根据动态路由来 获取响应的数据
    let id = pathname.replace('/detail/','')|| undefined //默认值为undefined
    console.log(id);
    let {data} = props
    useEffect(() => {
        getDetailData(id);
    },[])

    console.log(data.evaluate);
    const handleShare = () => {
        //to be continue  share
    }
    return (
        <>
            <HeaderComponent data={data} handleShare={handleShare}/>
        </>
    )
}
const mapStateToProps =(state) =>{
    return {
        data:state.detail.detailData,
    }
}
const mapDispatchProps = (dispatch) =>{
    return{
        getDetailData(id){
            dispatch(action.getDetailData(id))
        }
    }
}
export default connect(mapStateToProps,mapDispatchProps)(memo(Detail))